<template>
    <view class="content">
        <swiper class="swiper" :indicator-dots="true" :style="{'height':windowHeight}" @animationfinish="animationfinish"
        indicator-color="#ffe67e" interval="2000" autoplay="autoplay" circular="false">
			<swiper-item class="box">
				<view  class="swiperbox">
					<text class="txt" @click="tologin()">跳过</text>
				</view>
				<image class="img3" :style="{'height':windowHeight,'width':windowWidth}" src="http://localhost:3000/static/logoimg/引导图1.png" ></image>
			</swiper-item>
			<swiper-item class="box">
				<view  class="swiperbox">
					<text class="txt" @click="tologin()">跳过</text>
				</view>
				<image class="img3" :style="{'height':windowHeight,'width':windowWidth}" src="http://localhost:3000/static/logoimg/引导图2.png" ></image>
			</swiper-item>
			<swiper-item class="box">
				<view  class="swiperbox">
					<text class="txt" @click="tologin()">跳过</text>
				</view>
				<image class="img3" :style="{'height':windowHeight,'width':windowWidth}" src="http://localhost:3000/static/logoimg/引导图3.png" ></image>
			</swiper-item>
            <swiper-item class="box">
				<view  class="swiperbox">
					<text class="txt">进入首页</text>
				</view>
				<image class="img3" :style="{'height':windowHeight,'width':windowWidth}" src="http://localhost:3000/static/logoimg/引导图4.png" ></image>
			</swiper-item>
        </swiper>
    </view>
</template>
<script>
    export default {
        data() {
            return {
                windowHeight: '603px'  ,//定义手机屏幕高度值变量
				windowWidth: '375px'  ,//定义手机屏幕高度值变量
				autoplay:true
            }
        },
        onLoad() {
            var _me = this;
            uni.getSystemInfo({//获取手机屏幕高度信息，让swiper的高度和手机屏幕一样高
                success: function(res) {
                    _me.windowHeight = res.windowHeight + 'px';
					_me.windowWidth = res.windowWidth + 'px';
                }
            });
		},		
        methods: {
            animationfinish(e) {
                // console.log(JSON.stringify(e.detail.current));
                //判断到最后一张后，自动转向进入首页
                if (e.detail.current == 3) {
                    setTimeout(function() {
                        uni.redirectTo({
                            url: '/pages/login/login'
                        });
                    }, 1000)
                }
            },
			tologin(){
				this.autoplay = false
				setTimeout(function() {
				    uni.redirectTo({
				        url: '/pages/login/login'
				    });
				}, 1000)
			}
        }
    }
</script>
<style lang="scss">
    .swiper {
        width: 100%;
        height: 100vw;
    }
	.box{
		position: absolute;
		.swiperbox{
			margin-top: 10px;
			position: relative;
			z-index: 1;
			color: #55ffff;
			.txt{
				margin-left: 300px;
				font-size: 110%;
			}
		}
		.img3{
			position: relative;
			margin-top: -30px;
			z-index: -1;
		}
	}
</style>